<template>
    <div class="content">
        <div class="header">
            <p class="title">药品信息查询</p>
        </div>
        <div class="body">
            <div class="search" @keydown.enter="search()">
                <div>
                    <label for="">药品名称：</label><input v-model="drugs.name" type="text">
                    <label for="">药品id：</label><input v-model="drugs.id" type="text">
                </div>
                <div>
                    <button class="button" @click="search">搜索</button>
                    <button class="button" @click="add_patient">添加药品</button>
                </div>
            </div>
            <div class="drugs_list">
                <div class="pager_content">
                    <table class="patient-data"  v-if="show_list">
                        <tr class="tb_header"><td>药品id</td><td>药品名称</td><td>药品类型</td><td>库存</td><td>价格</td><td>单位</td><td>适应症状</td><td>主要功效</td><td>用法用量</td><td>生产日期</td><td>有效期</td></tr>
                        <tr v-for = "(item,index) in show_list" @click="current_drugs(item,index,$event)" :class="{select:index==current_drugs_index}">
                            <td id="id">{{ item.id }}</td>
                            <td id="name">{{ item.name }}</td>
                            <td id="type">{{ item.type }}</td>
                            <td id="stock">{{ item.stock }}</td>
                            <td id="price">{{ item.price }}</td>
                            <td id="unit">{{ item.unit }}</td>
                            <td id="adaptive_symptoms">{{ item.adaptive_symptoms }}</td>
                            <td id="effect">{{ item.effect }}</td>
                            <td id="use_dose">{{ item.use_dose }}</td>
                            <td id="produce_date">{{ item.produce_date }}</td>
                            <td id="effective_date">{{ item.effective_date }}</td>
                        </tr>
                    </table>
                    <div class="pager">
                        <a href="javascript:;" @click="next_page(-1)">上一页</a>
                        <a :class="{active: current_page+1 == item}" href="javascript:;" @click="click_page(item)" v-for="(item,index) in total_page">{{ item }}</a>
                        <a v-if="more=='yes'" href="javascript:;" @click="click_more_page(item)">...</a>
                        <a v-if=" !(this.total_page==this.current_page+1 && this.more=='no') " href="javascript:;" @click="next_page(1)">下一页</a>
                    </div>
                </div>
                <div class="button" v-if="show_list">
                    <button class="edit" @click="show_details($event)">{{ button_text }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'drugs_list',
    data(){
        return {
            show_list:[{id:1,drugs_name:"布洛芬缓释胶囊"}],
            button_text:'查看详情',
            current_drugs_index:null,
            current_drugs_item:null,
            drugs:{
                name:'',
                id:''
            },
            medical_record_y:null,  // 当前选择的病历项相对于父元素(或者是他的容器)的y坐标
            server_return_max_size:120,  // 服务器一次性最多返回120条记录
            server_return_max_page:null,  // 服务器一次性最多返回多少页
            reques_count:0,  // 当前是第几次请求，从0开始
            current_page:0,  // 当前页面
            total_page:1,  // 目前的总页数
            page_size:15,  // 每页显示的数量，暂定15条记录
            more:null,  // 是否还有更多病历
        }
    },
    methods:{
        show_details(){
            // 根据病人id来查看病历信息
            if(this.current_drugs_item==null){
                this.$toast("请先选择你要查看的药品")
                return
            }
            // `/drugs_details/${this.current_drugs_index}`
            this.$router.push({
                path:'/drugs_details',
                query:{
                    reques_count:this.reques_count,
                    drugs_id:this.show_list[this.current_drugs_index].id,
                    // m_r_id:this.medical_record_item.id
                }
            })
        },
        add_patient(){
            let add_patient = this.$router.resolve("/add_drugs")
            let new_w = 1120, new_h = 630
            let w = (window.outerWidth-new_w)/2
            let h = (window.outerHeight-new_h)/2
            window.open(add_patient.href,'_blank',`channelmode=yes,top=${h},left=${w},width=${new_w},height=${new_h}`)
        },
        current_drugs(item,index,el){
            this.current_drugs_item=item
            this.current_drugs_index=index
            this.$store.state.global_var.select_drugs={
                item:item,
                index:index
            }  // 全局保存下
            let e = el.currentTarget
            this.medical_record_y = e.offsetTop
            console.log(this.medical_record_y);
            let edit = document.querySelector(".edit")
            edit.style.marginTop=this.medical_record_y+5+"px"
        },
        search(){
            for(let item in this.drugs){
                this.drugs[item]=this.drugs[item].trim()  //去除首尾空格
            }
            // 判断用户是否输入了信息
            let is_null=true
            for (let item in this.drugs){
                if(this.drugs[item] !=""){
                    is_null=false
                }
            }
            if(is_null){  // 判断用户是否输入了信息，如果没有输入则返回
                this.$toast("请输入你要查询的信息.");
                return
            }

            // 全局保存下
            this.$store.state.global_var.search_drugs=this.drugs
            this.$http({
                method:'post',
                url:'/ajax/api/search_drugs',
                data:{
                    drugs:this.drugs,
                    current_page:0,
                    page_size:this.page_size || 15
                }
            }).then(data=>{
                console.log(data.data);
                if(Object.prototype.toString.call(data.data)=="[object String]"){
                    this.$toast(data.data);
                    return
                }
                // this.show_list[0]=data.data
                this.$store.state.drugs_list=[]
                this.$store.state.drugs_list[0] = this.$my_tools.deepClone(data.data)
                this.current_page = data.data.current_page
                this.update_patient()
            })
        },

        // 分页器相关方法
        next_page(n){  // 点击下一页时获取数据
            
            this.current_page+=n
            if(this.current_page<0){
                this.current_page=0
            }
            let edit = document.querySelector(".edit")
            edit.style.marginTop="0px"
            // console.log(this.current_page);
            // 目前的做法是，后端一次性返回server_return_max_size条记录，前端默认每页显示15条，如果查出来的结果还有多的就再向后端发送请求
            // 计算出当前的请求次数，请求过的内容可以不用再请求
            this.reques_count = Math.floor(this.current_page/(this.server_return_max_size/this.page_size))
            if(this.current_page%(this.server_return_max_size/this.page_size)==0 && n==1 && !this.$store.state.drugs_list[this.reques_count]){
                // 如果当前的请求刚好超过了要显示的类容，并且用户点击的是下一页，并且全局变量里没有对应的数据，那说明该向后端发送请求了，
                // let search = this.$store.state.global_var.search
                // this.$refs.homeBase.search(search.patient,this.current_page)
                this.$http({
                    method:'post',
                    url:'/ajax/api/search_drugs',
                    data:{
                        drugs:this.drugs,
                        // patient:search.patient,
                        // date:search.date,
                        current_page:this.current_page || 0,
                        page_size:this.page_size
                    }
                }).then(data=>{
                    if(typeof data.data == "string"){
                        this.$toast(data.data)
                        return
                    }
                    console.log(data.data);
                    this.next_page_arrange_data(data)
                    this.update_patient()
                })
            }else{
                this.update_patient()
            }
        },
        // 数据整理
        next_page_arrange_data(data){
            // 获取到数据后，保存数据
            if (data.data.drugs_more=="yes"){
                data.data.drugs_list=data.data.medical_record.slice(0,this.server_return_max_size)
            }
            this.$store.state.drugs_list[this.reques_count] = data.data
            // 如果用户是按日期查询数据的话，要对数据进行整理
            // data.data.patient_list.forEach((item,index)=>{
            //     data.data.patient_list[index].medical_record=[]
            //     data.data.patient_list[index].treat_record=[]
            //     // 根据生日，计算出年龄
            //     data.data.patient_list[index]["age"]= this.$my_tools.getAge(item["birthday"])
            //     data.data.medical_record.forEach((m_item,m_index)=>{
            //         if (item.id==m_item.patient_id){
            //             data.data.patient_list[index].medical_record.push(m_item)
            //             // this.$store.state.show_list.medical_record[m_index].medical_insurance=item.medical_insurance
            //         }
            //     })
            //     data.data.treat_record.forEach((m_item,m_index)=>{
            //         if (item.id==m_item.patient_id){
            //             data.data.patient_list[index].treat_record.push(m_item)
            //         }
            //     })
            // })
            // let index=Math.floor(this.current_page/(this.server_return_max_size/this.page_size))
            // this.$store.state.patient[this.reques_count] = data.data.patient_list
            // this.$store.state.global_var.current_page=data.data.current_page
        },
        // 用户直接点击页数时
        click_page(current_page){
            this.current_page = current_page
            this.next_page(-1)
        },
        click_more_page(){
            this.current_page = this.total_page-1
            this.next_page(1)
        },

        // 更新数据
        update_patient(){
            // 获取当前页面需要的数据
            
            // if(this.current_page==0 ){
            //     // 如果搜索的内容发生了变化，则重置当前页和总页数
            //     // this.$store.state.global_var.current_page=null
            //     this.current_page=0  // 重置当前页
            //     // this.current_page=this.$store.state.show_list[0].current_page  
            //     this.total_page=this.current_page + Math.ceil(this.$store.state.show_list[0].medical_record.length/this.page_size)  // 计算出总共有多少页
            //     console.log("运行了",this.total_page,this.current_page);
            //     console.log(this.$store.state.show_list);
            //     this.update_patient()
            // }
            this.reques_count = Math.floor(this.current_page/(this.server_return_max_size/this.page_size))
            this.total_page = Math.ceil((this.$store.state.drugs_list[this.reques_count].drugs_list.length) / this.page_size) + this.reques_count*this.server_return_max_page
            this.show_list = this.$my_tools.deepClone(this.$store.state.drugs_list[this.reques_count].drugs_list.slice((this.current_page%this.server_return_max_page)*this.page_size,(this.current_page%this.server_return_max_page+1)*this.page_size))
            this.more = this.$store.state.drugs_list[this.reques_count].drugs_more
            // console.log(this.$store.state.drugs_list[this.reques_count].drugs_list);
            // console.log(this.current_page,this.server_return_max_page,this.page_size,);
            // console.log((this.current_page%this.server_return_max_page)*this.page_size,(this.current_page%this.server_return_max_page+1)*this.page_size);
        },
    },
    mounted(){
        // 计算出服务器一次性最多返回的页数
        this.server_return_max_page=this.server_return_max_size/this.page_size
        if(this.$store.state.drugs_list.length>0){
            // this.show_list = this.$my_tools.deepClone(this.$store.state.show_list.medical_record.slice(this.current_page*this.page_size,(this.current_page+1)*this.page_size))
            this.update_patient()
        }else{
            this.show_list=[]
        }
        if(this.$store.state.global_var.search_drugs){
            this.drugs = this.$store.state.global_var.search_drugs
        }
        // this.show_list = this.$my_tools.deepClone(this.$store.state.drugs_list)
        // if(this.$store.state.global_var.select_drugs){
        //     this.current_drugs_index=this.$store.state.global_var.select_drugs.index
        //     this.current_drugs_item=this.$store.state.global_var.select_drugs.item
        // }
    }
}
</script>

<style lang='scss' scoped>
.content{
    margin: 5px;
    .title{
        font-weight: bolder;
        margin:10px 0;
        text-align: center;
    }
    .search{
        display: flex;
        align-items: center;
        .button{
            margin-left: 5px;
        }
    }

    .drugs_list{
        margin-top: 10px;
        display: flex;
        // flex-direction: column;
        // align-items:flex-start;
        // 表格样式
        max-width: 1100px;
        overflow: auto;
        table{
            flex:0 0 auto;
            tr,td{
                border: 1px solid #aaa;
                vertical-align: middle;
                padding: 8px;
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden;
                
            }
            tr{
                background-color: rgb(253, 255, 250);
            }
            .tb_header{
                font-weight: bolder;
                background-color: rgb(213, 219, 203);
            }
            .select{
                background-color: rgb(233, 235, 230);
            }

            .pager{
                // width: 200px;
                margin: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                a{
                    margin:0 5px;
                    // color:rgb(105, 119, 243);
                }
                .active{
                    color:black;
                    cursor:default;
                    font-weight: bolder;
                    font-size: 20px;
                }
            }

        }
        .button{
            display: flex;
            margin-left: 10px;
            flex-direction: column;
            // position:absolute;
            // top: 15px;
            // right: 5px;
            // flex:1;
            button{
                margin-bottom: 10px;
                width: 80px;
                // text-align:ce;
                // background-color: rgb(245, 159, 102);
                // color: rgb(247, 238, 201);
            }
        }


        .pager{
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            a{
                margin:0 5px;
                // color:rgb(105, 119, 243);
            }
            .active{
                color:black;
                cursor:default;
                font-weight: bolder;
                font-size: 20px;
            }
        }
    }
    

}
</style>